<template>
    <div id="cinema">
        <div class="nav">
            <span>全城<i class="fa fa-caret-down"></i></span>
            <span>品牌<i class="fa fa-caret-down"></i></span>
            <span>特色<i class="fa fa-caret-down"></i></span>
        </div>
        <div>
            <ul>
                <li v-for="item in cinemaList" :key="item.id">
                    <p>
                        <span>{{ item.name }}</span>
                        <span class="price">{{ item.price }}</span>
                        <span class="peice-desc">元起</span>
                    </p>
                    <p class="address">
                        <span>{{ item.address }}</span>
                        <span>{{ item.distance }}</span>
                    </p>
                    <p class="tips">
                        <span>小吃</span>
                        <span>折扣卡</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Cinema',
    methods: {
        getCinemaData() {
            var that=this
            axios.get('/mock/api.json')
                .then(function (response) {
                    console.log(response);
                    if(response.status==200){
                        if(response.data && response.data.cinemaList){
                            that.cinemaList=response.data.cinemaList
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    created(){
        this.getCinemaData()
    },
    data() {
        return {
            cinemaList: []
        }
    }
}
</script>
<style scoped>
#cinema {
    padding-top: 50px;
    padding-bottom: 50px;
}

.nav span {
    width: 33%;
    display: inline-block;
    text-align: center;
    height: 45px;
    line-height: 45px;
}

.nav {
    border-bottom: 1px solid #ccc;
}

i {
    margin-left: 5px;
}

li {
    border-bottom: 1px solid #ccc;
    margin: 10px;
}

.price {
    color: #e54847;
    margin: 0 5px;
}

.price-desc {
    color: #e54847;
    font-size: 12px;
}

.address span {
    font-size: 12px;
    color: #999;
}

.address span:last-child {
    float: right;
}

.tips span {
    border: 1px solid #f90;
    color: #f90;
}

.tips {
    margin: 10px 0;
}
</style>